<script lang="ts" setup>
import { columns, dictionaryTypeFormSchemas, formSchemas } from './meta';

import { BasicCrud } from '@/components/crud';
import {
  addType,
  delType,
  optionselect,
  updateType,
} from '@/api/system/dict/type';
import {
  addData,
  delData,
  listData,
  updateData,
} from '@/api/system/dict/data';
import { useGridColumns } from '@/hooks/event/use-grid-columns';
import { computeResponsiveColumns } from '@/utils/responsive-util';
import BasicList from '@/components/list/index.vue';

defineOptions({
  name: 'PostPage',
});

/**
 * 字典类型选择
 */
const currentDictionaryType = ref<string>();
function handleDictionaryTypeSelect(value: string | undefined, _option: Recordable | null) {
  currentDictionaryType.value = value;
}
const requestParams = computed(() => {
  return {
    dictType: currentDictionaryType.value,
  };
});

const basicCrudInstance = ref();
function beforeCreate() {
  return computed(() => {
    return {
      dictType: currentDictionaryType.value,
    };
  });
}

/**
 * 响应式列
 */
const leftSpan = 1;
const { gridInstance, gridColumns } = useGridColumns(leftSpan);
const responsiveColumns = computeResponsiveColumns(300);
const rightSpan = computed(() => {
  const remainingColumns = gridColumns.value - leftSpan;
  return remainingColumns > 0 ? remainingColumns : leftSpan;
});
</script>

<template>
  <div>
    <NGrid ref="gridInstance" x-gap="6" y-gap="6" :cols="responsiveColumns" responsive="self" item-responsive>
      <NGi :span="leftSpan">
        <NCard content-style="padding: 12px;">
          <BasicList
            title="字典"
            :request="optionselect"
            has-create
            :create-request="addType"
            has-modify
            :modify-request="updateType"
            has-delete
            :delete-request="delType"
            delete-key="dictId"
            list-field="data"
            label-field="dictName"
            key-field="dictType"
            description-field="remark"
            :form-schemas="dictionaryTypeFormSchemas"
            @select="handleDictionaryTypeSelect"
          />
        </NCard>
      </NGi>
      <NGi :span="rightSpan">
        <BasicCrud
          ref="basicCrudInstance"
          :table-columns="columns"
          :form-schemas="formSchemas"
          :searchable="false"
          :request="listData"
          :request-params="requestParams"
          :create-request="addData"
          :before-create="beforeCreate"
          :modify-request="updateData"
          :delete-request="delData"
          key-field="dictCode"
        />
      </NGi>
    </NGrid>
  </div>
</template>

<style lang="less" scoped></style>
